<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="contacts, demo">
    <meta name="author" content="Luiz Américo">
    <!--link rel="shortcut icon" href="../../docs-assets/ico/favicon.png"-->

    <title>Contacts App (jQuery)</title>

    <!-- Bootstrap core CSS -->
    <link href="../libs/bootstrap/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="main.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->

    <script id="contact-template" type="text/x-handlebars-template">
       <td>{{id}}</td>
       <td>{{name}}</td>
       <td>{{categoryname}}</td>
       <td class="actions"><span class="glyphicon glyphicon-edit"></span> <a href="#" class="edit">Edit</a> &nbsp<span class="glyphicon glyphicon-remove"></span> <a href="#" class="delete">Delete</a></td>
    </script>

    <script id="phone-template" type="text/x-handlebars-template">
        <td>{{id}}</td>
        <td>{{number}}</td>
        <td class="table-actions"><span class="glyphicon glyphicon-edit"></span> <a href="#" class="edit-action">Edit</a> &nbsp<span class="glyphicon glyphicon-remove"></span> <a href="#" class="delete-action">Delete</a></td>
    </script>

    <script id="contact-dialog-template" type="text/x-handlebars-template">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title">{{#if id}}Edit{{else}}Add{{/if}} Contact</h4>
        </div>
        <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="contact-dialog-name">Name</label>
                    <input type="text" class="form-control" name="name" id="contact-dialog-name" placeholder="Enter Name" value="{{name}}">
                </div>
                <div class="form-group">
                    <label for="contact-dialog-category">Category</label>
                    <select class="form-control" id="contact-dialog-category">
                        <option>e</option>
                        <option>d</option>
                        <option>d</option>
                        <option>s</option>
                        <option>x</option>
                    </select>
                </div>
            </form>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            <button type="button" class="btn btn-primary save" data-dismiss="modal">Save</button>
        </div>
    </script>

    <script id="phone-dialog-template" type="text/x-handlebars-template">
        <div class="modal-dialog" data-contact-id="{{contactId}}">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">{{#if id}}Edit{{else}}Add{{/if}} Phone Number</h4>
                </div>
                <div class="modal-body">
                    <form role="form">
                        <div class="form-group">
                            <label for="phone-dialog-number">Number</label>
                            <input type="text" class="form-control" name="number" id="phone-dialog-number" placeholder="Enter Number" value="{{number}}">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary save-data" data-dismiss="modal">Save</button>
                </div>
            </div>
        </div>
    </script>

    <script id="main-template" type="text/x-handlebars-template">
        <div class="modal dynamic-modal" id="contact-dialog"></div>
        <div class="modal dynamic-modal" id="phone-dialog"></div>
        <div class="row">
            <div class="col-md-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a title="Add Contact" id="add-contact" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus-sign"></span> New Contact</a>
                    </div>
                    <div class="panel-body">
                        <table id="contacts-table" class="table table-hover">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Name</th>
                                <th>Category</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a title="Add Phone" id="add-phone" data-toggle="modal" class="btn btn-primary btn-sm"><span class="glyphicon glyphicon-plus-sign"></span> New Phone Number</a>
                    </div>
                    <div class="panel-body">
                        <table id="phones-table" class="table table-hover">
                            <thead>
                            <tr>
                                <th>Id</th>
                                <th>Number</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </script>

</head>

<body>

<div class="container">

</div> <!-- /container -->


<script src="../libs/jquery.js"></script>
<script src="../libs/handlebars.js"></script>
<script src="../libs/underscore.js"></script>
<script src="../libs/backbone.js"></script>
<script src="../libs/bootstrap/js/bootstrap.min.js"></script>
<script src="../libs/jquery.serialize-object.js"></script>

<script src="js/app.js"></script>

<script src="js/models/contact.js"></script>
<script src="js/models/phone.js"></script>

<script src="js/collections/contacts.js"></script>
<script src="js/collections/phones.js"></script>

<script src="js/views/contact.js"></script>
<script src="js/views/contacts.js"></script>
<script src="js/views/phone.js"></script>
<script src="js/views/phones.js"></script>
<script src="js/views/main.js"></script>
<script src="js/views/app.js"></script>

<script src="js/routers/router.js"></script>

</body>
</html>

